<template>
  <!--<div>123</div>-->
  <div class="map" id="map">
    <baidu-map
        :center="center"
        :zoom="zoom"
        @ready="handler"
        style="width:100%;height:100%"
        @click="getClickInfo"
        :scroll-wheel-zoom='true'
    >
      <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
      ></bm-geolocation>
      <bm-marker
          :position="{lng: 117.287, lat: 31.863}"
          @click="infoWindowOpen"
          :dragging="false"
          :icon="{url: require('../../assets/img/point-icon.png'), size: {width: 50, height: 50}}"
      >
        <!--<bm-label content="合肥市" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: -10, height: 30}"/>-->
        <bm-info-window
            :show="show"
            @close="infoWindowClose"
            @open="infoWindowOpen">
          合肥是我家，美丽靠大家
        </bm-info-window>
      </bm-marker>

      <!--自动搜索-->
      <!--<bm-control>-->
      <!--<bm-auto-complete v-model="keyword" :sug-style="{zIndex: 10}">-->
      <!--<van-field v-model="keyword" placeholder="请输入地点" style="width: 300px; margin-top: 10px; margin-left: 10px;">-->
      <!--</van-field>-->
      <!--</bm-auto-complete>-->
      <!--</bm-control>-->
      <!--<bm-local-search :keyword="keyword" :auto-viewport="true" style="display: none" />-->

      <!--手动搜索-->
      <!--bm-auto-complete会展示建议项-->
      <!--<bm-control>-->
        <!--<bm-auto-complete v-model="keyword" :sug-style="{zIndex: 10}">-->
          <!--<van-field v-model="keyword" placeholder="请输入地点" style="width: 300px; margin-top: 10px; margin-left: 10px;">-->
            <!--<template #button>-->
              <!--<van-icon size="20px" name="search" @click="searchPlace"></van-icon>-->
            <!--</template>-->
          <!--</van-field>-->
        <!--</bm-auto-complete>-->
      <!--</bm-control>-->
      <!--<bm-local-search :keyword="address" :auto-viewport="true" style="display: none" />-->
    </baidu-map>
    <!--设备状态-->
    <div class="device-status status">
      <div class="title">
        <div>设备状态</div>
      </div>
      <div class="content">
          <ul>
            <li v-for="(item, index) in statusList" :key="index">
              <img :src="item.src">
              <div class="bottom-text">{{item.text}}</div>
              <div class="count">{{item.count}}</div>
            </li>
          </ul>
      </div>
    </div>
    <!--设备类型统计-->
    <div class="device-status device-type">
      <div class="title">
        <div>设备类型统计</div>
      </div>
      <div class="content">
        <ve-ring :data="typeData" :extend="chartExtend"></ve-ring>
      </div>
    </div>
    <!--告警类型百分比-->
    <div class="device-status warning-type">
      <div class="title">
        <div>告警类型百分比</div>
      </div>
      <div class="content">
        <ve-ring :data="chartData" :extend="chartExtend"></ve-ring>
      </div>
    </div>
    <!--告警信息-->
    <div class="device-status warning-info">
      <div class="title">
        <div>告警信息</div>
      </div>
      <div class="content">

      </div>
    </div>
    <div class="device-status blank"></div>
  </div>
</template>
<script>

  export default {
    name: 'TestBaiDu',
    data () {
      return {
        center: {
          lng: 0,
          lat: 0
        },
        zoom: 13,
        keyword: '',
        show: false,
        location: '合肥',
        address: '',
        statusList: [
          {
            text: '正常',
            count: 0,
            src: require('../../assets/img/zx.png')
          },
          {
            text: '离线',
            count: 0,
            src: require('../../assets/img/lx.png')
          },
          {
            text: '暂停',
            count: 0,
            src: require('../../assets/img/zt.png')
          },
          {
            text: '告警',
            count: 0,
            src: require('../../assets/img/gj.png')
          }
        ],
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            {'日期': '1/1', '访问用户': 111},
            {'日期': '1/2', '访问用户': 222},
            {'日期': '1/3', '访问用户': 333},
            {'日期': '1/4', '访问用户': 444},
            {'日期': '1/5', '访问用户': 555}
          ]
        },
        typeData: {},
        chartExtend: {
          legend: {
            orient: 'vertical',
            x: 'left'
          },
          series: {
            top: -90,
            left: 100,
            label: {
              show: false,
              position: 'left'
            },
          }
        }
      }
    },
    mounted () {
      let height = window.screen.height
      document.getElementById('map').style.height = `${height - 64 - 68}px`
      this.getEquipmentCount()
      this.getEquipmentClassifyStatistics()
      this.getWarningTypeStatistics()
      this.getTodayWarningStatistics()
    },
    methods: {
      handler ({BMap, map}) {
        // 初始化地图,设置中心点坐标
        var point = new BMap.Point(119.8025089500, 25.4890556400)
        map.centerAndZoom(point, 13)

        // 添加鼠标滚动缩放
        map.enableScrollWheelZoom();
        // 添加缩略图控件
        // map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
        // 添加缩放控件
        // map.addControl(new BMap.NavigationControl());
        //添加比例尺控件
        // map.addControl(new BMap.ScaleControl());
        //添加地图类型控件
        //map.addControl(new BMap.MapTypeControl());

        //设置标注的图标
        var icon = new BMap.Icon("./static/img/map.png",new BMap.Size(100,100));
        //设置标注的经纬度
        var marker = new BMap.Marker(new BMap.Point(121.160724,31.173277),{icon:icon});
        //把标注添加到地图上
        // map.addOverlay(marker);
        var content = "<table>";
        content = content + "<tr><td> 编号：001</td></tr>";
        content = content + "<tr><td> 地点：上海汉得信息技术股份有限公司</td></tr>";
        content = content + "<tr><td> 时间：2018-1-3</td></tr>";
        content += "</table>";
        var infowindow = new BMap.InfoWindow(content);
        // 图标点击的时候显示标注
        marker.addEventListener("click",function(){
          this.openInfoWindow(infowindow);
        });
        // 标注默认显示
        // var infoWindow = new BMap.InfoWindow(content) // 创建信息窗口对象
        // map.openInfoWindow(infoWindow, point)

        // 自动定位
        let geolocation = new BMap.Geolocation();
        let that = this
        geolocation.getCurrentPosition(function(r) {
          that.center.lng = r.longitude;
          that.center.lat = r.latitude;
        }, {enableHighAccuracy: true});
      },
      getClickInfo (e) {
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
      },
      infoWindowClose () {
        this.show = false
      },
      infoWindowOpen () {
        this.show = true
      },
      getEquipmentCount () {
        this.$Message.loading('加载中...')
        this.$http('/rapid/equipmentInfo/getEquipmentInfoCount', {}).then((res) => {
          if (res.code == 200) {
            this.$Message.success('获取数据成功')
            for (let data of this.statusList) {
              for (let item of res.result) {
                if (data.text === item.title) {
                  data.count = item.count
                  break
                }
              }
            }
          } else {
            this.$Message.success('获取数据失败')
          }
        }).catch((err) => {
          this.$Message.error(err.message || '获取数据失败')
        }).finally(() => {
          this.$Message.close()
        })
      },
      getEquipmentClassifyStatistics () {
        this.$http('/rapid/equipmentInfo/equipmentClassifyStatistics', {}).then((res) => {
          if (res.code == 200) {
            this.$Message.success('获取数据成功')
            if (res.result) {
              this.typeData = res.result
            }
          } else {
            this.$Message.success('获取数据失败')
          }
        }).catch((err) => {
          this.$Message.error(err.message || '获取数据失败')
        }).finally(() => {
          this.$Message.close()
        })
      },
      getWarningTypeStatistics () {
        this.$http('/rapid/dataRecord/warningTypeStatistics', {}).then((res) => {
          if (res.code == 200) {
            this.$Message.success('获取数据成功')
            if (res.result) {
              this.chartData = res.result
            }
          } else {
            this.$Message.success('获取数据失败')
          }
        }).catch((err) => {
          this.$Message.error(err.message || '获取数据失败')
        }).finally(() => {
          this.$Message.close()
        })
      },
      getTodayWarningStatistics () {
        this.$http('/rapid/dataRecord/todayWarningStatistics', {}).then((res) => {

        })
      },
      searchPlace () {
        this.address = this.keyword
      }
    }
  }
</script>
<style scoped lang="less">
  .map {
    position: relative;
  }
  // 移除左下角百度地图版权
  /deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
  }
  // 移除左下角百度地图logo
  /deep/ div.anchorBL {
    display: none;
  }
  .device-status {
    position: absolute;
    right: 10px;
    height: 170px;
    width: 400px;
    top: 10px;
    .title {
      height: 35px;
      background-color: #1D76D4;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      div{
        text-align: left;
        height: 100%;
        width: auto;
        line-height: 35px;
        font-size: 16px;
        color: white;
        margin-left: 15px;
      }
    }
    .content {
      position: absolute;
      top: 35px;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: white;
    }
    &.status {
      ul {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        li {
          height: 100%;
          width: 100px;
          position: relative;
          list-style: none;
          img {
            position: absolute;
            left: 50%;
            top: 10px;
            transform: translate(-50%);
          }
          .bottom-text {
            position: absolute;
            left: 50%;
            top: 100px;
            transform: translate(-50%);
            color: #2EC27B;
            font-size: 14px;
          }
          .count {
            position: absolute;
            left: 50%;
            top: 42px;
            transform: translate(-50%);
            color: #2EC27B;
            font-size: 16px;
            font-weight: 700;
          }
        }
      }
    }
    &.device-type {
      top: 190px;
      height: 260px;
    }
    &.warning-type {
      top: 460px;
      height: 260px;
    }
    &.warning-info {
      top: 730px;
    }
    &.blank {
      top: 850px;
    }
  }
</style>
